<template>
  <div>
    <table-expand
      ref="table"
      :columns="columns"
      :data="data"
      :loading="loading"
      :config="config"
      :pageSizeOpts="pageSizeOpts"
      :pageNavigation="pageNavigation"
      :queryFormItem="queryFormItem"
      :collapseFormItem="collapseFormItem"
      @loadPage="loadPage"
      @handleCreate="handleCreate"
      @handleDetail="handleDetail"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleDeleteMultiple="handleDeleteMultiple"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></table-expand>
    <new-add-modal
      v-bind="addNewPanel"
      :modelType="modelType"
      :columns="formColumns"
      :rules="rules"
      @submit="handleNewAddSubmit"
    ></new-add-modal>
    <edit-modal
      v-bind="editPanel"
      :modelType="modelType"
      :columns="formColumns"
      :rules="rules"
      @submit="handleEditSubmit"
    ></edit-modal>
    <read-modal
      v-bind="readPanel"
      :modelType="modelType"
      :columns="columns"
      :rules="rules"
    ></read-modal>
  </div>
</template>

<script>
import tableExpand from "@/pages/components/tableExpand.vue";
import newAddModal from "@/pages/components/newAddModal.vue";
import editModal from "@/pages/components/editModal.vue";
import readModal from "@/pages/components/readModal.vue";
import mixin from "@/pages/components/mixins/mixin";
import { typeClassName } from "@/pages/config/classNameMap";
import columnsMixin from "./config";
export default {
  components: { tableExpand, newAddModal, editModal, readModal },
  name: "hydrogenCostFactor",
  mixins: [mixin, columnsMixin],
  data() {
    return {
      classObject: null, // 单个实例
      collectionObject: null, // 所有实例
      className: typeClassName["costFactor"].className,
      type: typeClassName["costFactor"].type,
      modelType: typeClassName["costFactor"].modelType,
      addNewPanel: {
        width: 1024,
        zIndex: 100,
        titleStyle: {},
        drawer: {
          show: false,
        },
        cols: 2,
      },
      editPanel: {
        width: 1024,
        zIndex: 100,
        titleStyle: {},
        drawer: {
          show: false,
        },
        cols: 2,
        data: {},
      },
      readPanel: {
        width: 1024,
        zIndex: 100,
        titleStyle: {},
        drawer: {
          show: false,
        },
        cols: 2,
        data: {},
      },
      rules: {
        tf_beginTime: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        tf_endTime: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      loading: false,
      config: {
        search: true,
        addButton: true,
        batchDeleteButton: true,
        tableSizeIcon: true,
        fullscreenIcon: true,
        refreshIcon: false,
        columnSettingIcon: true,
        action: true,
        additionalAction: false,
        hidePage: false,
      },
      pageSizeOpts: [10, 30, 50, 100],
      pageNavigation: { total: 0, pageSize: 20, pageNumber: 1 },
      selfFilter: {
        if_fromType: 1,
      },
    };
  },
  computed: {
    data() {
      if (this.collectionObject) {
        return this.collectionObject.records.map((d) => {
          return {
            ...d,
            ...d.values,
          };
        });
      } else {
        return [];
      }
    },
  },
  beforeMount() {
    this.collectionObject = this.$modelObject.create(
      `${this.modelType}Collection`
    );
    this.classObject = this.$modelObject.create(this.modelType);
    this.loadPage(this.pageNavigation, null);
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss"></style>
